<template>
  <div>
    <div class="titlelist6_10 titles">我的信息 / 基本信息</div>
    <div style="clear: both; height: 34px"></div>
    <div class="headerInfo">如需修改基本信息，请联系上级机构；</div>
    <div class="content">
      <div v-if="authenticationStatus == 0">
        <div class="title">基本信息</div>
        <div class="boxer1">
          <el-form ref="form" :model="form" label-width="150px">
            <el-form-item label="机构名称">
              <el-input
                style="width: 350px"
                v-model="form.officeName"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input
                style="width: 350px"
                v-model="form.master"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input
                style="width: 350px"
                v-model="form.phone"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input
                style="width: 350px"
                v-model="form.email"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="联系地址">
              <el-select
                v-model="form.provinceName"
                @change="selectProvince"
                placeholder="请选择"
                class="ads"
                disabled
              >
                <el-option
                  v-for="item in provinceArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>

              <el-select
                v-model="form.cityName"
                @change="selectProvince"
                placeholder="请选择"
                class="ads"
                disabled
              >
                <el-option
                  v-for="item in cityArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>

              <el-select
                v-model="form.countryName"
                @change="selectProvince"
                placeholder="请选择"
                class="ads"
                disabled
              >
                <el-option
                  v-for="item in countArr"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
              <el-input
                type="input"
                style="width: 500px"
                v-model="form.address"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
          <div style="clear: both"></div>
        </div>
        <div class="title">提现规则</div>
        <!-- 显示普通代理的 -->
        <div class="boxer1" v-if="jurisdiction == 1 && jurisdiction != 2">
          <el-form ref="form" :model="form" label-width="150px">
            <el-form-item label="代付手续费">
              <el-input
                style="width: 350px"
                v-model="form.singleDrawServiceCharge"
                disabled
              ></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="提现分润税率">
              <el-input
                style="width: 350px"
                v-model="form.taxRate"
                disabled
              ></el-input>
              <span>%</span>
            </el-form-item>
            <el-form-item label="单笔提现最低金额">
              <el-input
                style="width: 350px"
                v-model="form.singleDrawAmt"
                disabled
              ></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="单日封顶提现">
              <el-input
                style="width: 350px"
                v-model="form.dayDrawmaxAmt"
                disabled
              ></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="单日最大提现次数">
              <el-input
                style="width: 350px"
                v-model="form.dayDrawmaxCnt"
                disabled
              ></el-input>
              <span>次</span>
            </el-form-item>
          </el-form>
          <div style="clear: both"></div>
        </div>
        <!-- oem查看显示这些 -->
        <div class="boxer1" v-if="jurisdiction != 1 && jurisdiction != 2">
          <el-form ref="form" :model="form" label-width="150px">
            <el-form-item label="单笔代付">
              <el-input
                style="width: 350px"
                v-model="form.drawFee"
                disabled
              ></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="代付费率">
              <el-input
                style="width: 350px"
                v-model="form.drawRate"
                disabled
              ></el-input>
              <span>%</span>
            </el-form-item>
            <el-form-item label="单笔封顶手续费">
              <el-input
                style="width: 350px"
                v-model="form.singleMax"
                disabled
              ></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="单笔最低手续费">
              <el-input
                style="width: 350px"
                v-model="form.singleMin"
                disabled
              ></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="单笔最高费率">
              <el-input
                style="width: 350px"
                v-model="form.maxRate"
                disabled
              ></el-input>
              <span>%</span>
            </el-form-item>
          </el-form>
          <div style="clear: both"></div>
        </div>

        <div class="title">实名信息</div>
        <div class="boxer1">
          <el-form ref="form" :model="form" label-width="150px">
            <el-form-item label="用户类型">
              <el-select
                class="selects"
                disabled
                v-model="centerType"
                placeholder="请选择"
              >
                <el-option label="公司" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="营业执照号">
              <el-input
                style="width: 350px"
                v-model="form.certNbr"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="法人姓名">
              <el-input
                style="width: 350px"
                v-model="form.legalPersonName"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="法人证件号">
              <el-input
                style="width: 350px"
                v-model="form.legalPersonIdCard"
                disabled
              ></el-input>
            </el-form-item>
            <div style="clear: both"></div>
            <el-form-item label="经营范围">
              <el-input
                style="width: 850px"
                type="textarea"
                rows="5"
                v-model="form.mccCont"
                disabled
              ></el-input>
            </el-form-item>
            <div style="clear: both"></div>
            <el-form-item style="margin-top: 20px" label="账户类型">
              <el-select
                class="selects"
                v-model="cardType"
                disabled
                placeholder="请选择"
              >
                <el-option label="对公" value="1"></el-option>
              </el-select>
            </el-form-item>
            <div style="clear: both"></div>
            <el-form-item label="账户名称">
              <el-input
                style="width: 350px"
                v-model="form.accountName"
                disabled
              ></el-input>
            </el-form-item>

            <el-form-item label="开户账号">
              <el-input
                style="width: 350px"
                v-model="form.accountNo"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="开户手机号">
              <el-input
                style="width: 350px"
                v-model="form.reservedMobile"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="开户地区">
              <el-input
                style="width: 350px"
                v-model="form.openProvinceName"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="开户银行">
              <el-input
                style="width: 350px"
                v-model="form.bankName"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="开户支行">
              <el-input
                style="width: 350px"
                v-model="form.openBank"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="title">资质</div>
        <div class="boxer1">
          <div style="clear: both"></div>
          <div class="picGroup">
            <div class="pic">
              <!-- <img :src="form.bankCardPho" alt="" /> -->
              <el-upload
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :file-list="listImg"
              >
                <i class="el-icon-plus"></i>
                <el-dialog :visible.sync="dialogVisible4" append-to-body>
                  <img width="100%" :src="form.busLicencePho" alt />
                </el-dialog>
              </el-upload>
              <div class="picTitle">营业执照</div>
            </div>
            <div class="pic">
              <!-- <img :src="form.openAccPho" alt="" /> -->
              <el-upload
                list-type="picture-card"
                :on-preview="handlePictureCardPreview1"
                :file-list="listImg1"
              >
                <i class="el-icon-plus"></i>
                <el-dialog :visible.sync="dialogVisible5" append-to-body>
                  <img width="100%" :src="form.openAccPho" alt />
                </el-dialog>
              </el-upload>
              <div class="picTitle">开户许可证</div>
            </div>
            <div class="pic">
              <!-- <img :src="form.legalCertFrontPho" alt="" /> -->
              <el-upload
                list-type="picture-card"
                :on-preview="handlePictureCardPreview2"
                :file-list="listImg2"
              >
                <i class="el-icon-plus"></i>
                <el-dialog :visible.sync="dialogVisible6" append-to-body>
                  <img width="100%" :src="form.legalCertFrontPho" alt />
                </el-dialog>
              </el-upload>
              <div class="picTitle">法人身份证正面</div>
            </div>
            <div class="pic">
              <!-- <img :src="form.legalCertBackPho" alt="" /> -->
              <el-upload
                list-type="picture-card"
                :on-preview="handlePictureCardPreview3"
                :file-list="listImg3"
              >
                <i class="el-icon-plus"></i>
                <el-dialog :visible.sync="dialogVisible7" append-to-body>
                  <img width="100%" :src="form.legalCertBackPho" alt />
                </el-dialog>
              </el-upload>
              <div class="picTitle">法人身份证反面</div>
            </div>
          </div>

          <div style="clear: both"></div>
        </div>
      </div>
      <div v-if="authenticationStatus == 1">
        <NoRealName />
      </div>
    </div>
  </div>
</template>

<script>
import https from "../../plugins/https";
// 引入未实名页面
import NoRealName from "../../components/noRealName/noRealName";
export default {
  name: "route",
  data() {
    return {
      authenticationStatus: "", //认证状态
      httpurl: this.GLOBAL.httpurl,
      uploadDisabled: "", //营业执照
      uploadDisabled5: "", //开户许可证
      uploadDisabled6: "", //
      uploadDisabled7: "", //身份证反面
      uploadDisabled8: "", // 银行卡
      legalCertBackPho: "", //身份证反面
      dialogImageUrl5: "",
      dialogVisible5: false, //开户许可证
      dialogVisible4: false, //营业执照
      dialogVisible6: false, //法人身份证正面展示
      dialogVisible7: false, //身份证反面展示
      dialogVisible8: false, //银行卡

      // 回显的数据
      listImg: null,

      //银行
      bankNameArr: "",
      // 获取省份
      provinceArr: "",
      centerType: "1",
      cardType: "1",
      // 需要上传的
      form: {
        cardType: "1",
        centerType: "1",
        // 开户银行
        bankCode: "",
        // 开户地主
        openCity: "",
        busLicencePho: "", //营业执照
        openAccPho: "", //开户许可证
        legalCertFrontPho: "", //身份证正面照
        legalCertBackPho: "", //身份证反面
        bankCardPho: "", // 银行卡
        openProvince: "", //开户省份
        legalPersonName:""//法人姓名
      },
    };
  },
  components: {
    NoRealName,
  },
  mounted: function () {},
  beforeCreate() {},
  created() {
    this.jurisdiction = localStorage.getItem("jurisdiction");
    // 调用

    // 获取用户是否认证
    this.authenticationStatus = localStorage.getItem("authenticationStatus");
    if (this.authenticationStatus == 0) {
      this.echoData();
      return;
    }
  },
  methods: {
    handlePictureCardPreview() {
      this.dialogVisible4 = true;
    },
    handlePictureCardPreview1() {
      this.dialogVisible5 = true;
    },
    handlePictureCardPreview2() {
      this.dialogVisible6 = true;
    },
    handlePictureCardPreview3() {
      this.dialogVisible7 = true;
    },
    //限制上传图片
    beforeAvatarUpload1(file) {
      let newName = file.name.substring(file.name.lastIndexOf("."));
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      if (!isJPG) {
        layer.open({
          content: "上传预览图片只能是 jpg、jpeg、png 格式!",
          skin: "msg",
          time: 2,
        });
        return false;
      }
    },
    getAds() {
      this.getProvince();
      this.getCity(this.form.areaId);
      this.getCount(this.form.city);
    },
    // 获取数据
    echoData() {
      let id = localStorage.getItem("uid");
      https
        .getUpdateOfficeInfo({ officeUid: id })
        .then((res) => {
          console.log("回显的数据");
          console.log(res);
          this.form = res.data.data;
          // this.getAds();

          // 营业执照
          let bankCardPho = [{ name: "", url: res.data.data.busLicencePho }];
          // 开户许可证
          let openAccPho = [{ name: "", url: res.data.data.openAccPho }];
          // 法人身份证正面
          let legalCertFrontPho = [
            { name: "", url: res.data.data.legalCertFrontPho },
          ];
          // 法人身份证反面
          let legalCertBackPho = [
            { name: "", url: res.data.data.legalCertBackPho },
          ];

          this.listImg = bankCardPho;
          this.listImg1 = openAccPho;
          this.listImg2 = legalCertFrontPho;
          this.listImg3 = legalCertBackPho;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //   跳转到实名页面
    getUrl() {
      this.$router.push({
        name: "meInfo",
      });
    },
    // 获取省份
    getProvince() {
      https
        .getProvinces({})
        .then((res) => {
          console.log("省份");
          console.log(res);
          this.provinceArr = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取城市
    getCity(upCode) {
      https
        .getCity({ upCode: upCode })
        .then((res) => {
          console.log("获取出来的称试");
          console.log(res.data[0]);
          this.cityArr = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getCount(vals) {
      https
        .getCount({ upCode: vals })
        .then((res) => {
          console.log("获取出来的线");
          console.log(res);
          this.countArr = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.con {
  padding: 20px;
}
.boxer1 {
  padding: 20px;
  padding-left: 0;
}
.rangeTxt {
  display: flex;
}
.rangeTitle {
  width: 150px;
  text-align: right;
  margin-right: 12px;
}
/* /deep/ .el-input {
  width: 300px !important;
} */
/deep/ .el-input__inner {
  width: 100%;
}
.title {
  width: calc(100% - 40px);
  margin: 20px;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  background: #f9fafc;
  float: left;
}
p {
  text-align: center;
  margin-top: 10px;
}
/deep/ .selects > .el-input {
  width: 350px;
}
/deep/ .ads .el-input {
  width: 173px;
}
.pic {
  margin-right: 30px;
}
img {
  width: 100%;
  height: 100%;
}
.picGroup {
  display: flex;
  padding-left: 150px;
}
.el-form-item {
  margin-bottom: 20px;
}
/deep/ .ads .el-input {
  width: 114px;
}
.picTitle {
  text-align: center;
  margin-top: 10px;
}
/deep/ .el-upload--picture-card {
  display: none;
}
/deep/ .el-upload-list__item-delete {
  display: none !important;
}
.headerInfo {
  height: 30px;
  line-height: 30px;
  background: #fff5eb;
  color: #fb932b;
  width: 100%;
  padding-left: 20px;
}
.content {
  margin-top: 0;
  height: calc(100vh - 100px - 55px);
}
</style>
<style rel="stylesheet/scss">
.disabled .el-upload--picture-card {
  display: none;
}
</style>

